<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>风行融媒体</title>
  <!-- 资源路径修复脚本 - 必须最先加载 -->
  <script>require('./utils/asset-fix.js');</script>
  <link rel="stylesheet" href="./styles/background.css">
  <link rel="stylesheet" href="./styles/titlebar.css">
  <link rel="stylesheet" href="./styles/navbar.css">
  <link rel="stylesheet" href="./styles/layout.css">
</head>
<body>
  <!-- 自定义标题栏 -->
  <div class="custom-titlebar">
    <div class="titlebar-left">
      <div class="titlebar-avatar" id="titlebarAvatar">
        <img id="titlebarAvatarImg" src="./assets/avatar.png" alt="用户头像">
      </div>
      <div class="titlebar-title" id="titlebarTitle">文件同步器</div>
    </div>
    <div class="titlebar-right">
      <div class="titlebar-controls">
        <button class="titlebar-btn cloud-sync" id="titlebarCloudSync" title="云同步">
          <svg t="1761036139862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5278" width="19" height="19"><path d="M806.7072 470.528A290.816 290.816 0 0 0 252.16 371.4048a217.5488 217.5488 0 0 0-9.8304 428.1344 149.1456 149.1456 0 0 0 37.0176 4.352h504.4224a167.8336 167.8336 0 0 0 167.7824-167.7824c1.0752-82.7904-62.1056-154.6752-144.896-165.5808z m-44.6464 44.6464a26.2656 26.2656 0 0 0 19.6096 7.6288h4.352a113.3056 113.3056 0 0 1 0 226.6112H280.5248a114.3808 114.3808 0 0 1-26.1632-3.2768 164.1984 164.1984 0 0 1 19.6096-324.6592 27.3408 27.3408 0 0 0 22.9888-17.408 237.3632 237.3632 0 0 1 458.6496 84.992v3.2768c-1.0752 10.9056 1.0752 17.408 6.5536 22.8864z" p-id="5279" fill="#515151"></path><path d="M489.6768 557.6704a23.1936 23.1936 0 0 0-30.72 0l-27.2384 27.2384V458.5472a21.8112 21.8112 0 1 0-43.5712 0v126.3616l-27.2384-27.2384a23.1936 23.1936 0 0 0-30.72 0 21.0432 21.0432 0 0 0 0 30.72l64.256 64.256c1.0752 1.0752 2.2016 1.0752 3.2768 2.2016s2.2016 1.0752 3.2768 2.2016c1.0752 0 2.2016 1.0752 3.2768 1.0752h10.9056c1.0752 0 2.2016-1.0752 3.2768-1.0752a22.784 22.784 0 0 0 6.5536-4.352l64.256-64.256a21.0432 21.0432 0 0 0 0-30.72zM670.72 508.672l-64.4608-64.3072-1.0752-1.0752c-1.0752 0-1.0752-1.0752-2.2016-1.0752s-1.0752-1.0752-2.2016-1.0752-1.0752-1.0752-2.2016-1.0752-1.0752 0-2.2016-1.0752h-13.056c-1.0752 0-1.0752 0-2.2016 1.0752a1.0752 1.0752 0 0 0-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752l-1.0752 1.0752c-1.0752 0-1.0752 1.0752-2.2016 1.0752L510.3616 508.672a21.5552 21.5552 0 0 0 30.72 30.72L568.32 512v126.3616a21.8112 21.8112 0 0 0 43.5712 0V512l27.2384 27.2384a21.0432 21.0432 0 0 0 30.72 0 20.48 20.48 0 0 0 1.0752-30.72z" p-id="5280" fill="#515151"></path></svg>
        </button>
        <button class="titlebar-btn minimize" id="titlebarMinimize" title="最小化">
          <span>─</span>
        </button>
        <button class="titlebar-btn maximize" id="titlebarMaximize" title="最大化">
          <span>□</span>
        </button>
        <button class="titlebar-btn close" id="titlebarClose" title="关闭">
          <span>✕</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 用户菜单 -->
  <div class="user-menu" id="userMenu">
    <div class="user-menu-header">
      <div class="user-menu-avatar">
        <img id="userMenuAvatarImg" src="./assets/avatar.png" alt="用户头像">
      </div>
      <div class="user-menu-info">
        <div class="user-menu-name" id="userMenuName">林一</div>
        <div class="user-menu-level" id="userMenuLevel">铁一 等级</div>
      </div>
      <button class="user-menu-sign-btn" id="userSignBtn">+ 签名</button>
    </div>
    
    <div class="user-menu-signature">
      <input type="text" placeholder="输入你的个性签名..." id="userSignatureInput">
    </div>
    
    <div class="user-menu-divider"></div>
    
    <div class="user-menu-items">
      <div class="user-menu-item" id="menuMyCard">
        <span>我的个人名片</span>
      </div>
      <div class="user-menu-item" id="menuMyQRCode">
        <span>我的二维码与链接</span>
      </div>
      <div class="user-menu-item" id="menuMoreAccounts">
        <span>修改更多账号</span>
      </div>
    </div>
    
    <div class="user-menu-divider"></div>
    
    <div class="user-menu-items">
      <div class="user-menu-item" id="menuHelp">
        <svg class="menu-icon" viewBox="0 0 1024 1024" width="16" height="16">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"></path>
          <path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5 0.1-39.3-17.1-76-48.3-103.3zM472 732c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v48z" fill="currentColor"></path>
        </svg>
        <span>帮助与版权</span>
        <svg class="menu-arrow" viewBox="0 0 1024 1024" width="12" height="12">
          <path d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z" fill="currentColor"></path>
        </svg>
      </div>
      <div class="user-menu-item" id="menuSettings">
        <svg class="menu-icon" viewBox="0 0 1024 1024" width="16" height="16">
          <path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.1l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.7 482.1 390 512 390c29.9 0 58 11.7 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z" fill="currentColor"></path>
        </svg>
        <span>设置</span>
      </div>
    </div>
    
    <div class="user-menu-divider"></div>
    
    <div class="user-menu-item" id="menuLogout">
      <svg class="menu-icon" viewBox="0 0 1024 1024" width="16" height="16">
        <path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5-32.6 32.5-70.5 58.1-112.7 75.9-43.6 18.4-90 27.8-137.9 27.8-47.9 0-94.3-9.3-137.9-27.8-42.2-17.8-80.1-43.4-112.7-75.9-32.6-32.5-58.1-70.4-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-0.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112c4.1-3.2 4.1-9.4 0-12.6z" fill="currentColor"></path>
      </svg>
      <span>退出登录</span>
    </div>
  </div>
  
  <!-- 侧边导航栏 -->
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="user-avatar">
        <img id="userAvatarImg" src="./assets/avatar.png" alt="用户头像">
      </div>
    </div>
    
    <div class="sidebar-nav">
      <div class="nav-item active" data-view="message" data-icon-default="DH10.svg" data-icon-active="DH11.svg">
        <div class="nav-icon">
          <img src="./assets/DH11.svg" alt="消息">
          <span class="notification-badge" id="notificationBadge" style="display: none;">0</span>
        </div>
        <div class="nav-text">消息</div>
      </div>
      <div class="nav-item" data-view="workbench" data-icon-default="DH20.svg" data-icon-active="DH21.svg">
        <div class="nav-icon">
          <img src="./assets/DH20.svg" alt="工作台">
        </div>
        <div class="nav-text">工作台</div>
      </div>
      <div class="nav-item" data-view="calendar" data-icon-default="DH30.svg" data-icon-active="DH31.svg">
        <div class="nav-icon">
          <img src="./assets/DH30.svg" alt="日历">
        </div>
        <div class="nav-text">日历</div>
      </div>
      <div class="nav-item" data-view="files" data-icon-default="DH40.svg" data-icon-active="DH41.svg">
        <div class="nav-icon">
          <img src="./assets/DH40.svg" alt="文件">
        </div>
        <div class="nav-text">文件</div>
      </div>
    </div>
    
    <div class="sidebar-footer">
      <div class="nav-item" id="sidebarSettingsBtn">
        <div class="nav-icon">
          <img src="./assets/442P.png" alt="设置">
          <div class="server-status-indicator connecting" id="serverStatusIndicator"></div>
        </div>
        <div class="nav-text">设置</div>
      </div>
    </div>
  </div>

  <!-- 内容区域 - 用于嵌入功能页面 -->
  <div id="contentFrame" class="content-frame"></div>

  <script src="./scripts/titlebar.js"></script>
  <script src="./scripts/server-status.js"></script>
  <script src="./scripts/base.js"></script>
  
  <!-- 监听服务器连接状态 -->
  <script>
    const { ipcRenderer } = require('electron');
    
    // 🔥 页面加载时，先获取当前 WebSocket 连接状态
    (async () => {
      try {
        const isConnected = await ipcRenderer.invoke('get-ws-connection-status');
        if (typeof updateServerStatus === 'function') {
          if (isConnected) {
            updateServerStatus('connected');
          } else {
            updateServerStatus('connecting');
          }
        }
      } catch (error) {
        console.error('获取 WebSocket 连接状态失败:', error);
        // 出错时默认设置为连接中
        if (typeof updateServerStatus === 'function') {
          updateServerStatus('connecting');
        }
      }
    })();
    
    // 监听初次服务器连接成功
    ipcRenderer.on('server-connected', () => {
      console.log('📡 收到服务器连接成功事件');
      if (typeof updateServerStatus === 'function') {
        updateServerStatus('connected');
      }
    });
    
    // 监听WebSocket连接成功（包括重连）
    ipcRenderer.on('ws-connected', () => {
      console.log('📡 WebSocket连接成功');
      if (typeof updateServerStatus === 'function') {
        updateServerStatus('connected');
      }
    });
    
    // 监听WebSocket正在重连
    ipcRenderer.on('ws-reconnecting', (event, attemptNumber) => {
      console.log('📡 WebSocket正在重连...', attemptNumber);
      if (typeof updateServerStatus === 'function') {
        updateServerStatus('connecting');
      }
    });
    
    // 监听WebSocket断开连接
    ipcRenderer.on('ws-disconnected', (event, reason) => {
      console.log('📡 WebSocket断开连接:', reason);
      if (typeof updateServerStatus === 'function') {
        updateServerStatus('disconnected');
      }
    });
    
    // 监听WebSocket状态变化（如果有的话）
    if (typeof window.wsManager !== 'undefined') {
      window.wsManager.on('connected', () => {
        if (typeof updateServerStatus === 'function') {
          updateServerStatus('connected');
        }
      });
      
      window.wsManager.on('disconnected', () => {
        if (typeof updateServerStatus === 'function') {
          updateServerStatus('disconnected');
        }
      });
      
      window.wsManager.on('connecting', () => {
        if (typeof updateServerStatus === 'function') {
          updateServerStatus('connecting');
        }
      });
    }
  </script>
</body>
</html>
